<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/bst.min.js"></script>
    <script src="js/jquery.slim.min.js"></script>
    <script src="js/CCFileUp.min.js"></script>
    <style>
        body{
            background: #494A5F;
            color: #D5D6E2;
        }
        li {
            background-position: center;
        }
        pre {
            font-family: Courier New;
        }
    </style>
</head>
<body>
<script type="application/worker" id="hashWorker" src="js/md5Worker.min.js"></script>
<input type="file" multiple id="f">
<ol></ol>
<script>
    function progressBar(s, pl, ps) {
        var ss = s.split('');
        var l_b = parseInt(ps * pl);
        var l_bg = pl - l_b;
        var lm = ss[0] + repeatN(ss[1], l_b) + repeatN(ss[2], l_bg) + ss[3];
        return lm;
    }

    function repeatN(s, n) {
        var rs = '';
        for (var i = 0; i < n; i++) {
            rs += s;
        }
        return rs;
    }
</script>
<script>
    let fileUp=new CCFileUp("ws://localhost:8899/ws");
    let f=document.getElementById('f');
    f.onchange=function (e) {
        let files=e.target.files;
        for(let i=0;i<files.length;i++){
            files[i].progressBar=$('<li><pre></pre></li>').appendTo('ol');
            files[i].progressBar.find('pre').html(JSON.stringify({
                name:files[i].name,
                type:files[i].type,
                size:files[i].formatSize(2)
            },2,' '));
            files[i].hashComplete=function(){
                console.log("hash complete \t["+this.name+"]");
            };
            files[i].onProcess=function(){
                var barText=this.step==1?
                    progressBar('╢□ ╟', 54, this.progress):
                    progressBar('╢■□╟', 54, this.progress);
                this.progressBar.find('pre').html(JSON.stringify({
                    pbar: barText,
                    progress: (this.progress * 100).toFixed(8) + "%",
                    id:this.id,
                    head: this.head,
                    suffix:this.suffix,
                    type: this.type,
                    size: this.formatSize(2),
                    name:this.name
                },2,' '));
            };
            files[i].uploadComplete=function () {
                console.log("upload complete \t["+this.name+"]");
            }
        }
        fileUp.addFiles(files);
    }
</script>
</body>
</html>